<!-- 采购申请 -->
<template>
  <div>
    <el-card style="width: 98%; margin: 0 auto; margin-top: 10px">
      <el-form :model="form" label-width="auto" :inline="true">
        <el-form-item label="机构名称:">
          <el-select v-model="form.companyId" placeholder="请选择" style="width: 180px" clearable>
            <el-option v-for="item in list" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="期望到货日期:">
          <el-date-picker
            v-model="value"
            type="daterange"
            clearable
            unlink-panels
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :shortcuts="shortcuts"
            @change="datachange"
          />
        </el-form-item>
        <el-form-item label="请选择:">
          <el-select v-model="form.state" placeholder="请选择" style="width: 180px" clearable>
            <el-option label="已经发货" value="已经发货" />
            <el-option label="待提交" value="待提交" />
          </el-select>
        </el-form-item>
        <el-form-item style="margin-left: 2%">
          <el-button type="primary" :icon="Search" @click="search">查询</el-button>
          <el-button :icon="Refresh" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card style="width: 98%; margin: 0 auto; margin-top: 10px">
      <ELTable v-bind="tableConfig" ref="purchaseTable">
        <template #receiveTime="{ scope }">
          {{ dayjs(scope.row.receiveTime).format("YYYY-MM-DD HH:mm") }}
        </template>
        <template #addTime="{ scope }">
          {{ dayjs(scope.row.addTime).format("YYYY-MM-DD HH:mm") }}
        </template>

        <template #operate="{ scope }">
          <el-button :icon="Tickets" text size="small" class="btn" @click="checkDetails(scope.row)">
            查看详情
          </el-button>
        </template>
      </ELTable>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import ELTable, { TableData } from "@/components/ELTable.vue";
import { Tickets, Search, Refresh } from "@element-plus/icons-vue";
import { purchaseList, purchaseDel, companyList } from "@/api/logistics/purchase/purchase";
import dayjs from "dayjs";
import { companyListData, purchaseListParams } from "@/api/logistics/purchase/type";
import { useRouter } from "vue-router";
const router = useRouter();

const form = reactive<purchaseListParams>({
  page: 1,
  pageSize: 10,
  companyId: undefined,
  state: "",
  beginDate: "",
  endDate: "",
});
const value = ref("");

// 获取机构列表
const list = ref<companyListData[]>([]);
const getList = async () => {
  let res = await companyList({ page: 1, pageSize: 1000 });
  // console.log(res);
  list.value = res.list;
};

// 日期
const datachange = (e: any) => {
  // console.log(e);
  if (e != null) {
    form.beginDate = e[0];
    form.endDate = e[1];
  } else {
    form.beginDate = "";
    form.endDate = "";
  }
};
const shortcuts = [
  {
    text: "Last week",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    },
  },
  {
    text: "Last month",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [start, end];
    },
  },
  {
    text: "Last 3 months",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      return [start, end];
    },
  },
];

// 搜索
const purchaseTable = ref();
const search = () => {
  form.page = 1;
  purchaseTable.value.getData(form);
};

// 重置
const reset = () => {
  form.state = "";
  form.beginDate = "";
  form.endDate = "";
  purchaseTable.value.getData();
};

// 查看详情
const checkDetails = (row: any) => {
  router.push(`/diet/purchase-detail/${row.id}`);
};

// 表格
const tableConfig = reactive<TableData>({
  loadData: purchaseList,
  delete: purchaseDel,
  isSelection: false,
  columns: [
    {
      prop: "id",
      label: "序号",
      attrs: {
        width: "70px",
      },
    },
    {
      prop: "addTime",
      label: "创建时间",
      slot: true,
    },
    {
      prop: "addAccountName",
      label: "申请人",
    },
    {
      prop: "companyName",
      label: "机构名称",
    },
    {
      prop: "counts",
      label: "品种数",
    },
    {
      prop: "receiveTime",
      label: "期望到货日期",
    },
    {
      prop: "state",
      label: "状态",
    },
    {
      prop: "operate",
      label: "操作",
      slot: true,
      attrs: {
        width: "192px",
      },
    },
  ],
});

onMounted(() => {
  getList();
});
</script>

<style scoped lang="less">
.btn {
  color: rgb(64, 158, 255);
  border: none;
}
</style>
